<template>
	<view class="uiwu-praise">
		<view @tap.stop="praiseTap" v-if="!is_praise">
			<slot name="default">
				<uiwu-icon v-if="!defaultImg" type="heart" :size="sizeIcon" :color="defaultColor" ></uiwu-icon>
				<image v-else :src="defaultImg" mode="widthFix" :style="{'width':imgWidth}"></image>
			</slot>
		</view>
		<view @tap.stop="praiseTap" v-else>
			<slot name="selectd">
				<uiwu-icon v-if="!selectedImg" type="heart-filled" :size="sizeIcon" :color="selectedColor" ></uiwu-icon>
				<image v-else :src="selectedImg" mode="widthFix" :style="{'width':imgWidth}"></image>
			</slot>
		</view>
	</view>
</template>
<script>
	/**
	 * uiwu-praise 点赞状态操作 支持插槽模式 default默认插槽  selectd选中插槽
	 * @property {String} imgWidth 图片的宽度传递图片后生效
	 * @property {String} defaultImg 默认图片 可以是本地路径 可以是网络路径
	 * @property {String} selectedImg 选中图片路径 可以是本地路径 可以是网络路径
	 * @property {String} selectedColor 选中字体图标颜色 默认#F00 传递图片后失效
	 * @property {String} defaultColor 默认字体图标颜色 默认#999 传递图片后失效
	 * @property {Number,String} sizeIcon 字体图标大小 默认30 传递图片后失效
	 * @property {Boolean} isLock 是否锁定 ，防重复点击 等于true禁止点击
	 * @property {Boolean} defaultType 组件默认状态 默认不选中 false
	 * @event {Function()} change 点击回调事件 返回选中或者不选择状态 true | false 
	 */
	export default {
		name:'uiwuPraise',
		props:{
			imgWidth:{
				default:'44rpx',
				type:String
			},
			defaultImg:{
				default:'',
				type:String
			},
			selectedImg:{
				default:'',
				type:String
			},
			selectedColor:{
				default:'#F00',
				type:String
			},
			defaultColor:{
				default:'#999',
				type:String
			},
			sizeIcon:{
				default:30,
				type:Number || String
			},
			isLock:{
				default:false,
				type:Boolean
			},
			defaultType:{
				default:false,
				type:Boolean
			}
		},
		watch:{
			defaultType(e){
				this.is_praise = e
			}
		},
		data() {
			return {
				is_praise: false
			}
		},
		created() {
			this.is_praise = this.defaultType
		},
		methods:{
			praiseTap(){
				if(this.isLock) return
				this.is_praise = !this.is_praise
				this.$emit('change',this.is_praise)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uiwu-praise{
		
	}
</style>
